<template>
  <div class="startTime">
    <p>{{ titleText }}:</p>
    <div class="date">
      <span>日期:</span>
      <VueDatePicker
        v-model="selectedDate"
        :min-date="startTime"
        :max-date="endTime"
        :start-date="startTime"
        :highlight="[startTime]"
        focus-start-date
        date-picker
        :format="format"
        prevent-min-max-navigation
        :enable-time-picker="false"
        :clearable="false"
        @internal-model-change="handleDateChange"
        placeholder="请选择日期"
      />
    </div>
    <div class="time">
      <span>时间:</span>
      <VueDatePicker
        v-model="selectedTime"
        :start-time="timeStart"
        :hours-increment="hourInterval"
        :hours-grid-increment="hourInterval"
        :minutes-increment="minuteInterval"
        :minutes-grid-increment="minuteInterval"
        :no-minutes-overlay="canMin"
        :min-time="timeStart"
        :max-time="timeEnd"
        :clearable="false"
        time-picker
        auto-apply
      >
      </VueDatePicker>
    </div>
    <div class="button_group">
      <button
        type="button"
        class="dp__btn dp__inc_dec_button btn_icon"
        aria-label="Increment hours"
        tabindex="0"
        @click="nextTime"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32"
          fill="currentColor"
          aria-hidden="true"
          class="dp__icon"
        >
          <path
            d="M24.943 19.057l-8-8c-0.521-0.521-1.365-0.521-1.885 0l-8 8c-0.52 0.52-0.52 1.365 0 1.885s1.365 0.52 1.885 0l7.057-7.057c0 0 7.057 7.057 7.057 7.057 0.52 0.52 1.365 0.52 1.885 0s0.52-1.365 0-1.885z"
          ></path>
        </svg>
      </button>
      <button
        type="button"
        class="dp__btn dp__inc_dec_button btn_icon"
        aria-label="Decrement minutes"
        tabindex="0"
        @click="lastTime"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32"
          fill="currentColor"
          aria-hidden="true"
          class="dp__icon"
        >
          <path
            d="M7.057 12.943l8 8c0.521 0.521 1.365 0.521 1.885 0l8-8c0.52-0.52 0.52-1.365 0-1.885s-1.365-0.52-1.885 0l-7.057 7.057c0 0-7.057-7.057-7.057-7.057-0.52-0.52-1.365-0.52-1.885 0s-0.52 1.365 0 1.885z"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</template>

<script>
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import { ref } from "vue";

export default {
  components: {
    VueDatePicker,
  },
  props: {
    startTime: Date,
    endTime: Date,
    minuteInterval: { type: Number, default: 0 },
    hourInterval: { type: Number, default: 1 },
    isNoTime: Boolean,
    barDate: Date,
    isPredict: false,
  },

  data() {
    return {
      selectedDate: ref(),
      selectedTime: ref(),
      timeLock: false,
      updateLock: false,
    };
  },
  methods: {
    compareDatesByYearMonthDay(date1, date2) {
      if (!(date1 && date2)) return false;
      const year1 = date1.getFullYear();
      const month1 = date1.getMonth();
      const day1 = date1.getDate();
      const year2 = date2.getFullYear();
      const month2 = date2.getMonth();
      const day2 = date2.getDate();
      return year1 === year2 && month1 === month2 && day1 === day2;
    },
    padSingleDigit(number) {
      if (0 <= number && number < 10) {
        return `0${number}`;
      }
      return `${number}`;
    },
    handleTimeChange(e) {},
    handleDateChange(e) {},
    format(date) {
      const day = this.padSingleDigit(date.getDate());
      const month = this.padSingleDigit(date.getMonth() + 1);
      const year = this.padSingleDigit(date.getFullYear());
      return `${year}/${month}/${day}`;
    },
    nextTime() {
      let newDateTime = new Date(this.selectedDate);
      newDateTime.setHours(this.selectedTime.hours);
      newDateTime.setMinutes(this.selectedTime.minutes);
      // 增加时间
      if (this.minuteInterval > 0) {
        newDateTime.setMinutes(newDateTime.getMinutes() + this.minuteInterval);
      } else {
        newDateTime.setHours(newDateTime.getHours() + this.hourInterval);
      }

      if (newDateTime > this.endTime) {
        return;
      }
      this.selectedDate = newDateTime;
      this.selectedTime = {
        hours: newDateTime.getHours(),
        minutes: newDateTime.getMinutes(),
      };
      this.timeLock = true;
    },

    lastTime() {
      let newDateTime = new Date(this.selectedDate);
      newDateTime.setHours(this.selectedTime.hours);
      newDateTime.setMinutes(this.selectedTime.minutes);
      // 减少时间
      if (this.minuteInterval > 0) {
        newDateTime.setMinutes(newDateTime.getMinutes() - this.minuteInterval);
      } else {
        newDateTime.setHours(newDateTime.getHours() - this.hourInterval);
      }

      if (newDateTime < this.startTime) {
        return;
      }
      // 更新selectedDate和selectedTime
      this.selectedDate = newDateTime;
      this.selectedTime = {
        hours: newDateTime.getHours(),
        minutes: newDateTime.getMinutes(),
      };
      this.timeLock = true;
    },
  },
  watch: {
    $route(to, from) {
      this.selectedDate = this.endTime;
      console.log("selectedDate", this.selectedDate);
    },
    endTime() {
      this.selectedDate = this.endTime;
      console.log("selectedDate", this.selectedDate);
    },
    barDate(newVal) {
      if (newVal) {
        if (this.compareDatesByYearMonthDay(this.selectedDate, newVal)) {
          this.timeLock = true;
          this.updateLock = true;
        }
        this.selectedDate = newVal;
        this.selectedTime = {
          hours: newVal.getHours(),
          minutes: newVal.getMinutes(),
        };
      }
    },
    selectedTime(newTime, oldTime) {
      console.log("selectedTime", newTime);
      if (!this.updateLock) {
        if (this.selectedDate && this.selectedTime) {
          const year = this.selectedDate.getFullYear();
          const month = this.selectedDate.getMonth() + 1;
          const date = this.selectedDate.getDate();
          const totalData = {
            year: year,
            month: month,
            date: date,
            timeStart: this.timeStart,
            timeEnd: this.timeEnd,
            ...this.selectedTime,
          };
          this.$emit("updateData", totalData);
        }
      } else {
        this.updateLock = !this.updateLock;
      }
    },
  },

  computed: {
    canMin() {
      if (this.minuteInterval != 0) {
        return false;
      } else {
        return true;
      }
    },
    titleText() {
      return this.isPredict ? "起报时间" : "当前时间";
    },
    timeStart() {
      let defaultTime = { hours: 0, minutes: 0 };
      if (this.$route.name === "convectivegust") {
        defaultTime = { hours: 8, minutes: 0 };
      }
      if (this.$route.name === "strongrain") {
        defaultTime = { hours: 8, minutes: 0 };
      }
      if (this.isNoTime) {
        if (!this.timeLock) {
          this.selectedTime = defaultTime;
        } else {
          this.timeLock = !this.timeLock;
        }
        return defaultTime;
      } else {
        if (
          this.compareDatesByYearMonthDay(this.startTime, this.selectedDate)
        ) {
          if (!this.timeLock) {
            this.selectedTime = {
              hours: this.startTime.getHours(),
              minutes: this.startTime.getMinutes(),
            };
          } else {
            this.timeLock = !this.timeLock;
          }

          return {
            hours: this.startTime.getHours(),
            minutes: this.startTime.getMinutes(),
          };
        } else {
          if (!this.timeLock) {
            this.selectedTime = defaultTime;
          } else {
            this.timeLock = !this.timeLock;
          }
          return defaultTime;
        }
      }
    },
    timeEnd() {
      let defaultTime = { hours: 23, minutes: 59 };
      if (this.isNoTime) {
        return defaultTime;
      } else {
        if (this.compareDatesByYearMonthDay(this.endTime, this.selectedDate)) {
          return {
            hours: this.endTime.getHours(),
            minutes: this.endTime.getMinutes(),
          };
        } else {
          return defaultTime;
        }
      }
    },
  },
  mounted() {
    this.selectedDate = this.endTime;
    console.log("selectedDate", this.selectedDate);
  },
};
</script>

<style>
.dp--menu-wrapper {
  position: relative !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50%;
}
.dp__menu {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.dp__relative {
  border: none;
}
.dp--overlay-relative {
  height: 20vh !important;
}
.startTime {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.date,
.time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.date > span,
.time > span {
  min-inline-size: max-content;
}
.button_group {
  width: 100%;
}
.dp__inc_dec_button:hover {
  background: #f3f3f3;
  color: #1976d2;
}
.btn_icon {
  transform: rotate(90deg);
}
.button_group {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}
</style>
